import React, { useEffect, useState } from 'react'
import { Button, Card, Form, Input, Table} from 'antd';
import { SearchOutlined, FormOutlined, DeleteOutlined } from "@ant-design/icons"
//引入api请求接口 
import { getHospitalSetListRequest } from '@/api/hospital/hospitalSet';
//请求返回数据records的类型
import { getHospitalSetListItemType } from '@/api/hospital/model/hospitalSetType';
// import "./index.css"
import style from "./index.module.css"

//columns是控制表格的字段有哪些,title就是字段的名称,dataindex与请求到的数据一一对应
/* 按照 React 的规范，所有的数组组件必须绑定 key。colomn中的dataindex的作用与key一样
在 Table 中，dataSource 和 columns 里的数据值都需要指定 key 值。
对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。 */
export default function HospitalSet() {
  //当组件加载时开始请求分页列表的展示数据,useEffect可能需要返回值,不接受异步传参
  const [state, setState] = useState({})
  useEffect(() => {
    const getHosSetList = async() => {
       //await后面都是异步函数
      const result = await getHospitalSetListRequest({
        page: 1,
        limit: 3
      })
      return result
      // console.log(result);//record[]
    }  
    // console.log(getHosSetList());//返回成功的promise对象,值为请求到的数据
    getHosSetList().then((value) => {setState(value.records)})
  }, [])
 
  const columns = [
    {
      title: '序号',
      dataIndex: 'name',
      fixed: 'left' as "left",
      width: 60,
      align: "center" as "center",
      //render是一个函数,第三个参数是当前数据的下标
      render(a:any,b:any,index:number){
        // console.log(a,b,index);
        return index + 1
        
      }
    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
      fixed: 'left' as "left",
     
    },
    {
      title: '医院编号',
      dataIndex: 'hoscode',
      
    },
    {
      title: 'api基础路径',
      dataIndex: 'apiUrl',
    },
    {
      title: '签名',
      dataIndex: 'signKey',
    },
    {
      title: '联系人姓名',
      dataIndex: 'contactsName',
    },
    {
      title: '联系人手机',
      dataIndex: 'contactsPhone',
    },
    {
      title: '操作',
      dataIndex: 'tags',
      //为什么要这样写????
      fixed: "right" as "right",
      render(){
        return(
          <div>
          <Button type="primary" icon={<FormOutlined />}></Button>
          <Button type="primary" danger icon={<DeleteOutlined />}></Button>
        </div>
        )   
      }
    }, 
  ];

  // const [a,b,c] = Object.entries(state)
  // console.log("获取对象中所有的属性",Object.entries(state));
  // console.log("a,b,c",a,b,c);//a,b,c (2) ['0', {…}]0: "0"1: {id: 97858, createTime: '2022-07-17 16:39:30', updateTime: '2022-07-17 16:39:30', isDeleted: 0, param: {…}, …}apiUrl: "http://www.baidu.com"contactsName: "15101125517"contactsPhone: nullcreateTime: "2022-07-17 16:39:30"hoscode: "cdf"hosname: "成都v"id: 97858isDeleted: 0param: {}signKey: "b39a95add139bc9692f014fa5489dea2"status: 1updateTime: "2022-07-17 16:39:30"[[Prototype]]: Objectlength: 2[[Prototype]]: Array(0) (2) ['1', {…}]0: "1"1: {id: 97855, createTime: '2022-07-17 16:33:46', updateTime: '2022-07-17 16:33:46', isDeleted: 0, param: {…}, …}length: 2[[Prototype]]: Array(0) (2) ['2', {…}]
  
  
  
  const data = [
    ...Object.entries(state).map(item => item[1])
    
  ];
 
  console.log(data);
  

//渲染
  return (
    
    <div className={style.outer}>
      <Card>
      <Form
        name="basic"
        wrapperCol={{ span: 30 }}
        layout='inline'
      >
        <Form.Item
          name="username"
        >
          <Input placeholder="医院名称" />
        </Form.Item>

        <Form.Item
          name="password"
        >
          <Input placeholder='医院编号' />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
            查询
          </Button>
        </Form.Item>
        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="default" htmlType="reset">
            清空
          </Button>
        </Form.Item>
      </Form>

      

      <div className={style.mt}>
        <Button type='primary' className={style.mr}>添加</Button>
        <Button type="primary" danger disabled>批量删除</Button>
      </div>

       <Table 
       //设置css样式
       className={style.mt} 
       columns={columns} 
       dataSource={data as []} 
       //边框
       bordered
       //在table中要求dataSource中有可以属性,如果真的没有key,则可以使用rowKey属性指定一个key值
       //为什么可以直接拿到data集合里面的值???
       rowKey="hoscode"
       //滚动条{指定整体展示的宽高}
       scroll={{ x: 1500, y: 300 }}
       pagination={{
        pageSize:1,
        total:3,
        //每页显示多少条
        pageSizeOptions:[1,2,3],
        //是否展示切换器
        showSizeChanger:true
       }}
       
      
       />;
       </Card>
    </div>
    
  )
}
